import 'react-native-gesture-handler';
import React, {Fragment} from 'react';
import {
  Text,
  ScrollView,
  RefreshControl,
  StyleSheet,
  Dimensions,
  View,
  Image,
  TextInput,
  AsyncStorage,
  TouchableHighlight,FlatList
} from 'react-native';
import HomeScreenTop from './HomePage/HomeScreenTop';
import Swiper from 'react-native-swiper';
import LinearGradient from 'react-native-linear-gradient';
import SplashScreen from 'react-native-splash-screen';
export default class HomeScreen extends React.Component {
  constructor(){
    super()
    this.state={
      navigationData:[
        {"data":[{"textData":"新","textTitle":"时令水果","viewColor":"#93e7fa","voewColor2":"#55c7e1"},{"textData":"鲜","textTitle":"新鲜蔬菜","viewColor":"#76d22f","voewColor2":"#58b510"},{"textData":"水","textTitle":"肉蛋水产","viewColor":"#91fbc1","voewColor2":"#69c491"},{"textData":"果","textTitle":"熟食面点","viewColor":"#7ad87f","voewColor2":"#37ad3d"}]}
      ,{"data":[{"textData":"价","textTitle":"速冻产品","viewColor":"#e7ff4b","voewColor2":"#c4e009"},{"textData":"格","textTitle":"粮油干货","viewColor":"#8bc2ff","voewColor2":"#4791e1"},{"textData":"优","textTitle":"休闲零食","viewColor":"#5ef54d","voewColor2":"#24d70f"},{"textData":"惠","textTitle":"酒水饮料","viewColor":"#44ffe5","voewColor2":"#0bdcbf"}]}
      ],
      viewColor:'#76d22f',
      data:[{key: '现实热卖'},{key: '海外进口'},{key: '新品尝鲜'}],
      listData:[{name:'火龙果'},{name:'草莓'},{name:'葡萄'},{name:'橙子'},{name:'猕猴桃'}]
    }
  }
  
    componentDidMount(){//第一次加载的时候会走这个方法
      SplashScreen.hide();
     console.log(AsyncStorage.getItem('token'))
    }
    renTopItem=({item,index})=>{
      return (
        <View 
        ref={(ref) => this.selectedView = {...this.selectedView, [`top${index}`]: ref}}
        style = {{
          marginLeft:30,
          justifyContent:'center',
           borderColor:index == 0 ?'#2de85e' : '#bbbbbb',
          backgroundColor:index == 0 ?'#2de85e' : '#fbf8f8',
          alignItems:'center',
          borderRadius:5,
          borderWidth:1,
          height:30,
          width:(Dimensions.get('window').width)/4}}>
              <TouchableHighlight  underlayColor='#2de85e' onPress={()=>this.onSelected(index)}>
                    <Text >{item.key}</Text>
              </TouchableHighlight>
        </View>
      )
     
    }
    renderFruitsItem=({item,index})=>{
      return(
        <View style={{width:'30%',marginLeft: index%3 == 0 ? 40 : 30}}>
          <Text>{item.name}</Text>
        </View>
      )
    }
    onSelected=(index)=>{
      for(let i = 0 ; i < this.state.data.length;i++){
        if (index === i) {
          this.selectedView['top' + i].setNativeProps({
            style: {
              borderColor:'#2de85e',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#2de85e',
              borderRadius:5,
              borderWidth:1,
              height:30,
              width:(Dimensions.get('window').width)/4
          }
          })
        }else{
          this.selectedView['top' + i].setNativeProps({
            style: {
              borderColor:'#bbbbbb',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#ffffff',
              borderRadius:5,
              borderWidth:1,
              height:30,
              width:(Dimensions.get('window').width)/4
          }
          })
        }
      }
    }
   
    render() {
      return (
           <View style={styles.ScrollViewstyle}>
              <HomeScreenTop></HomeScreenTop>
              <View style={styles.SwiperViewStyle}>
              <Swiper style={styles.wrapper} showsButtons={true} showsButtons={false} autoplay={true} autoplayTimeout={4}>
                <Image source={require('./index.image/xgsg.jpg')} style={styles.SwiperViewImage}/>
                <Image source={require('./index.image/aaa.jpg')} style={styles.SwiperViewImage}/>
                <Image source={require('./index.image/xgsg.jpg')} style={styles.SwiperViewImage}/>
              </Swiper>
              </View>
              <View style={styles.ScrollViewStyle}>
                      {
                        this.state.navigationData.map((img,i)=>
                        
                          <View style={styles.ScrollViewStyleTop}>
                            
                            {this.state.navigationData[i].data.map((a,b)=>{
                                return (
                                  <View style={styles.ScrollViewStyleBorderView}>
                                    <LinearGradient colors={[this.state.navigationData[i].data[b].viewColor,this.state.navigationData[i].data[b].voewColor2]} style={{
                                                  height:50,
                                                  width:50,
                                                  paddingBottom:2 ,
                                                  borderRadius:28, 
                                                  elevation: 10,  
                                                  shadowColor: this.state.navigationData[i].data[b].viewColor,  
                                                  shadowOffset: { width: 0, height: 0 },  
                                                  shadowOpacity: 1,  
                                                  shadowRadius: 28}}>
                                        <Text style={{color:'#ffffff',textAlign:'center',marginTop:'20%',fontSize:21}}>{this.state.navigationData[i].data[b].textData}</Text>
                                    </LinearGradient>
                                    <Text style={{marginTop:5}}>{this.state.navigationData[i].data[b].textTitle}</Text>
                                  </View>
                                )
                               }
                              )
                            }
                          </View>
                        )
                      }
              </View>
              <View style={styles.MiaoShaViewStyle}>
                 <View style={styles.MiaoShaViewStyleLeft}>
                   <LinearGradient end={{x: 1, y: 0}} colors={['#ededed', '#e3dfdf']} style={styles.MiaoShaViewStyleLeftViewBx}>
                     <View style={styles.MiaoShaViewStyleLeftViewBxView}>
                      <Text style={{fontSize:21}}>开 宝 箱</Text>
                      <LinearGradient end={{x: 1, y: 0}} colors={['#44e3d8', '#64d19f']} style={styles.MiaoShaViewStyleLeftViewBxViewLinearGradient}>
                          <Text style={{color:'#f6fdfd',fontSize:18}}>6 6 元 大 礼 包</Text>
                      </LinearGradient>
                     </View>
                   </LinearGradient>
                 </View>
                 <View  style={styles.MiaoShaViewStyleLeft}>
                  <LinearGradient end={{x: 1, y: 0}} colors={['#ededed', '#e3dfdf']} style={styles.MiaoShaViewStyleriViewBxView}>
                     <View style={styles.MiaoShaViewStyleLeftViewBxView}>
                      <Text style={{fontSize:21,fontFamily:''}}>1 2 .1 2 来 啦</Text>
                      <LinearGradient end={{x: 1, y: 0}} colors={['#44e3d8', '#64d19f']} style={styles.MiaoShaViewStyleLeftViewBxViewLinearGradient}>
                          <Text style={{color:'#f6fdfd',fontSize:18}}>限 时 抢 购</Text>
                      </LinearGradient>
                     </View>
                   </LinearGradient>
                 </View>
               </View>
              <View style={styles.XianShiViewStyle} >
                <View style={{width:'100%',height:'15%',borderWidth:1}}>
                  <FlatList
                  style={{flexDirection:'row'}}
                  horizontal={true}
                  data = {this.state.data}
                  renderItem = {this.renTopItem}
                  /> 
                </View>
                <View style={{width:'100%',height:'85%',borderWidth:1}}>
                  <FlatList
                  // horizontal={true}
                   numColumns={3}
                  data = {this.state.listData}
                  renderItem = {this.renderFruitsItem}
                  /> 
                </View>
              </View>
           </View>
      )
      }
  }
  const styles = StyleSheet.create({
    Viewstyle:{
      width:Dimensions.get('window').width,
      height:Dimensions.get('window').height,
      backgroundColor:'#ffffff'
    },
    SwiperViewStyle:{
      width:Dimensions.get('window').width,
      height:((Dimensions.get('window').height)/100)*25,
      
    },
    SwiperViewImage:{
     width:'100%',
     height:'100%'
    },


    ScrollViewStyle:{
      width:Dimensions.get('window').width,
      height:((Dimensions.get('window').height)/100)*20,
      
    },
    ScrollViewStyleTop:{
      width:Dimensions.get('window').width,
      height:'50%',
      flexDirection:'row'
    },
    ScrollViewStyleButton:{
      width:Dimensions.get('window').width,
      height:'50%',
      borderWidth:1,
      flexDirection:'row'
    },
    ScrollViewStyleBorderView:{  
       width:'25%',
       height:'100%',
       justifyContent:'center',
       alignItems:'center',
    },
    MiaoShaViewStyleLeftViewBxViewLinearGradient:{
      height:'45%',
      width:'70%',
      borderRadius:5,
      alignItems:'center'
    },
    MiaoShaViewStyleriViewBxView:{
      width:'85%',
      height:'80%',
      backgroundColor:'#d1cbcb',
      borderRadius:5,
      marginLeft:10
    },
    MiaoShaViewStyle:{
      width:Dimensions.get('window').width,
      height:((Dimensions.get('window').height)/100)*10,
      flexDirection:'row',
      marginTop:5
    },
    MiaoShaViewStyleLeft:{
      width:'50%',
      height:'100%', 
    },
    MiaoShaViewStyleLeftViewBx:{
      width:'85%',
      height:'80%',
      backgroundColor:'#d1cbcb',
      borderRadius:5,
      marginLeft:30
    },
    MiaoShaViewStyleLeftViewBxView:{
     marginLeft:20,
     justifyContent:'center'
    },
    XianShiViewStyle:{
      width:Dimensions.get('window').width,
      height:((Dimensions.get('window').height)/100)*40,
    }

    
   
  })